import React, { Component, createRef } from 'react'
import { Breadcrumb, Form, Input, InputNumber, Button, Upload, message, Image } from 'antd'
import { UploadOutlined } from '@ant-design/icons';
import E from "wangeditor"
import { updateItem, fetchDetail } from '@api'
export default class ItemUpdate extends Component {

  constructor() {
    super();
    this.state = {
      // 上传的封面图片地址
      thumb: '',
      editor: null,
      item: {},

    }
    this.formInstance = createRef();
  }
  render() {
    return (
      <div>
        <Breadcrumb>
          <Breadcrumb.Item href="/admin">首页</Breadcrumb.Item>
          <Breadcrumb.Item href="/admin/itemList">商品管理</Breadcrumb.Item>
          <Breadcrumb.Item>修改商品</Breadcrumb.Item>
        </Breadcrumb>
        {/* 路径导航 */}
        {/* 表单内容 */}
        <Form
          style={{ maxWidth: 800, marginTop: 30 }}
          ref={this.formInstance}
          name="basic"
          form={this.state.formInstance}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          initialValues={
            this.state.item
          }
          onFinish={this.submitForm}
        >
          <Form.Item
            label="商品名字"
            name="name"
            rules={[{ required: true, message: '商品名必传' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="价格"
            name="price"
            rules={[{ required: true, message: '价格必传!' }]}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item
            label="库存"
            name="store"
          >
            <InputNumber defaultValue={0} />
          </Form.Item>
          <Form.Item
            label="描述"
            name="desc"

          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item
            label="封面图片"

          >
            <Upload
              name="file"
              action="/api/upload"
              onChange={this.uploadFile}
            >
              <Button icon={<UploadOutlined />}>Click to Upload</Button>
            </Upload>
            <Image src={this.state.thumb} width={100} />
          </Form.Item>
          <Form.Item
            label="详情"
          >
            <div id="content" />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
        {/* /表单内容 */}
      </div>
    )
  };
  componentDidMount() {
    this.initRich();
    this.fetchItem();
    
  };
  fetchItem = () => {
    // 获取商品详情数据
    fetchDetail(this.props.match.params.id).then(res => {
      if (res.data.code === 200) {
        this.setState({
          item: res.data.data,
          thumb: res.data.data.thumb
        }, () => {
          // 设置表单初始值
          this.formInstance.current.setFieldsValue(this.state.item);
          // 设置富文本的初始值
          this.state.editor.txt.html(this.state.item.content)
        })
      }
    })
  };
  initRich = () => {
    // 初始化富文本编辑器
    const editor = new E("#content")
    editor.create()
    this.setState({
      editor
    })
  };
  uploadFile = (info) => {
    // 上传状态发生改变
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      console.log('上传成功');
      console.log(info.file.response.data.url)
      this.setState({
        thumb: info.file.response.data.url
      })


    } else if (info.file.status === 'error') {
      console.log('上传失败');
    }
  };
  submitForm = (params) => {
    // 提交表单
    params.thumb = this.state.thumb;
    params.content = this.state.editor.txt.html();
    updateItem(params).then(res=> {
      if(res.data.code === 200){
        message.success(res.data.msg,2,()=> {
          // 回到列表页
          this.props.history.replace('/admin/itemList')
        })
      }
    })
  }
}
